<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>帖子详情</title>
    <link href="/styles/base.css" rel="stylesheet" type="text/css">
    <link href="/styles/travelguide.css" rel="stylesheet" type="text/css">
    <link href="/js/plugins/jqPaginator/jqPagination.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script type="text/javascript" src="/js/plugins/jqPaginator/jq-paginator.min.js"></script>
    <script src="/js/plugins/js-cookie/js.cookie.min.js"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script type="text/javascript" src="/js/vue/common.js"></script>
    <link rel="stylesheet" href="/styles/index_css.css">
</head>
<body>

<h1 style="text-align: center">
    帖子详情
</h1>
<h2 style="text-align: right">
    <a href="/views/login.html">登陆</a>
</h2>
<div class="container" id="app">
    <div class="box box-widget">
        <div class="box-header with-border">
            <div class="user-block">
                <h2>标题:{{messageBoard.title}}</h2>
                <p>内容:{{messageBoard.content}}</p>
            </div>
        </div>
        <h3>帖子回复</h3>
        <div v-for="c in messageBoard.comments">
        <div class="box-footer box-comments" >
            <div class="box-comment">
                <div class="comment-text">
                    <p>{{c.detail}}</p>
                </div>
            </div>

        </div>
        </div>
    </div>
    <form id="edit_form" method="post" action="http://localhost:8080/messageBoard/saveOrUpDate">
        评论:<textarea id="detail" name="detail" style="width:500px;height:100px;"></textarea><br/>
        <input type="button" value="发表" @click="subForm">
    </form>

</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            messageBoard:{}
        },
        methods:{
            subForm:function () {
                var param = getParams();
                var detail = $('#detail').val();
                $.get(domainUrl + "/comment/saveOrUpdate",{messageBoardId:param.id,detail:detail},function (data) {
                    if (data.success){
                        window.location.reload();
                    }
                })
            }
        },
        mounted:function () {
            //获取参数
            var param = getParams();
            var _this = this;
            $.get(domainUrl + "/messageBoard/detail",{id:param.id},function (data) {
                    if (data.success){
                        _this.messageBoard = data.data;

                    }
            })

        }
    });
</script>

</body>
</html>
